<template>
  <el-dialog title="查看分享展示" :close-on-click-modal="false" :destroy-on-close="true" width="1000px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-diglogBox">
      <div class="share-left">
        <el-carousel trigger="click" height="300px" :loop="false">
          <el-carousel-item v-for="(item, index) in info.resourceUrlList" :key="index">
            <!-- 纯文本 -->
            <div class="media-box" v-if="item.fileType === '1'">
              <iframe style="width: 378px;height: 300px;" :src="'https://view.officeapps.live.com/op/view.aspx?src='+item.fileUrl"></iframe>
            </div>
            <!-- 图片 -->
            <div class="media-box" v-if="item.fileType === '2'">
              <img :src="item.fileUrl" style="max-width:100%;max-height:100%;display: block;margin: 0 auto;">
            </div>
            <!-- 音频 -->
            <div class="media-box" v-if="item.fileType === '3'">
              <audio class="audio" controls :src="item.fileUrl"></audio>
            </div>
            <!-- 视频 -->
            <div class="media-box" v-if="item.fileType === '4'">
              <video class="video" controls :src="item.fileUrl">
                <track :src="item.fileUrl" lang="en" label="English" kind="subtitles" default />
              </video>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="share-rateBox">
          <div>星级评分</div>
          <div>{{info.averageScore}}分/满分5分</div>
        </div>
        <div class="share-rateBox">
          <el-rate :value=5 disabled></el-rate>
          <el-progress :percentage="percent5" style="width: 200px;"></el-progress>
        </div>
        <div class="share-rateBox">
          <el-rate :value=4 disabled></el-rate>
          <el-progress :percentage="percent4" style="width: 200px;"></el-progress>
        </div>
        <div class="share-rateBox">
          <el-rate :value=3 disabled></el-rate>
          <el-progress :percentage="percent3" style="width: 200px;"></el-progress>
        </div>
        <div class="share-rateBox">
          <el-rate :value=2 disabled></el-rate>
          <el-progress :percentage="percent2" style="width: 200px;"></el-progress>
        </div>
        <div class="share-rateBox">
          <el-rate :value=1 disabled></el-rate>
          <el-progress :percentage="percent1" style="width: 200px;"></el-progress>
        </div>
        <div class="share-rateBox">共计{{total}}条评分</div>
      </div>
      <div class="share-right">
        <div class="online-dialogTip">评价详情</div>
        <div class="comment-box" v-for="(item, index) in info.appraisedList" :key="index">
          <img :src="item.headUrl" alt="" class="comment-logo">
          <div class="comment-con">
            <div class="comment-name">{{item.nickName}}</div>
            <el-button type="text" icon="el-icon-time" size="mini" class="comment-time">{{item.appraisedTime}}</el-button>
          </div>
          <el-rate v-model="item.score" disabled></el-rate>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { shareScoreDetail } from '@/api/student/lesson/classroom'
export default {
  props: ['id'],
  data () {
    return {
      isShow: true,
      info: {
        appraisedList: [],
        resourceUrlList: []
      },
      total: 0,
      percent1: 0,
      percent2: 0,
      percent3: 0,
      percent4: 0,
      percent5: 0
    }
  },
  methods: {
    async shareScoreDetail () {
      const res = await shareScoreDetail({ activityId: this.id })
      if (res.code === '200') {
        this.info = res.data
        if (this.info.appraisedList.length > 0) {
          this.info.appraisedList = this.info.appraisedList.map(item => ({
            appraisedId: item.appraisedId,
            appraisedTime: item.appraisedTime,
            headUrl: item.headUrl,
            nickName: item.nickName,
            score: parseInt(item.score),
            stuId: item.stuId
          }))
        }
        this.total = Number(this.info.wholeStartInfo.num0) + Number(this.info.wholeStartInfo.num1) + Number(this.info.wholeStartInfo.num2) + Number(this.info.wholeStartInfo.num3) + Number(this.info.wholeStartInfo.num4) + Number(this.info.wholeStartInfo.num5)
        this.percent1 = (Number(this.info.wholeStartInfo.num1) / this.total).toFixed(2) * 100
        this.percent2 = (Number(this.info.wholeStartInfo.num2) / this.total).toFixed(2) * 100
        this.percent3 = (Number(this.info.wholeStartInfo.num3) / this.total).toFixed(2) * 100
        this.percent4 = (Number(this.info.wholeStartInfo.num4) / this.total).toFixed(2) * 100
        this.percent5 = (Number(this.info.wholeStartInfo.num5) / this.total).toFixed(2) * 100
      }
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.shareScoreDetail()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .share-left {
    float: left;
    width: 400px;
    height: 600px;
    padding: 20px 10px;
    background: #fff;
    border: 1px solid #eee;
    overflow-y: scroll;
  }
  .share-right {
    float: right;
    width: 550px;
    height: 600px;
    background: #fff;
    border: 1px solid #eee;
  }
  .media-box {
    width: 378px;
    height: 300px;
    .video {
      width: 378px;
      height: 300px;
      outline: none;
    }
  }
</style>
